<template>
    <div class="search-box">
        <div class="search-content">
            <div class="search-left">
                <div
                    class="search-item"
                    v-for="(item, index) in searchList"
                    :key="index"
                    :style="{ width: item.width || '33.3%' }"
                >
                    <div class="search-label">{{ item.label }}</div>
                    <div class="search-component">
                        <component :is="getComponent(item.type)" v-model="item.value" :info="item" />
                    </div>
                </div>
            </div>
            <div class="search-right">
                <el-button type="primary" @click="searchHandle">查询</el-button>
                <el-button @click="resetHandle">重置</el-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import type { IComponentInfoType } from '@/types/component';
import { getComponent } from '../map';
import { cloneDeep } from 'lodash';

const { searchList } = defineProps({
    searchList: {
        type: Array<IComponentInfoType>,
        default: () => []
    }
});

const emit = defineEmits(['search', 'reset']);

// 拷贝一份初始数据
const copyData = cloneDeep(searchList);
//查询事件
const searchHandle = () => {
    emit('search', getSearchValue());
};
// 重置searchList
const resetHandle = () => {
    searchList.forEach((item, index) => {
        item.value = copyData[index].value;
    });
    emit('reset', getSearchValue());
};
// 获取查询的值
const getSearchValue = () => {
    let obj: any = {};
    searchList.forEach((item, index) => {
        obj[item.id] = item.value;
    });
    return obj;
};
</script>
